import { Form, Input } from "antd";
import { to } from "wsp-toolkit";
import { useDispatch } from "react-redux";
import { useNavigate } from "react-router-dom";
import { UserOutlined, LockOutlined } from "@ant-design/icons";
import { HOME_URL } from "@/config";
import { setToken } from "@/redux/modules/user";
import { genRules } from "@/utils/form-utils.js";
import { encrypt, msg } from "@/utils/util";
import { useState } from "react";
import { mockLogin, loginApi } from "@/api/modules/login";
import NButton from "@/components/n-button/index.jsx";
import logoPng from "@/assets/logo.png";
import bgImg from "@/assets/illustration/loginBgImgMinisize.svg";
import styles from "./index.module.css";
import { StorageKey } from "@/enums/dictionaries.js";
import { fetchUserDetail } from "@/api/modules/user.js";
import { useRequest } from "@/hooks/useRequest.js";

export default function Login() {
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const [loading, setLoading] = useState(false);
  const [form] = Form.useForm();

  const { run, loading: detailLoading } = useRequest(fetchUserDetail, {
    manual: true,
    onSuccess: (data) => {
      localStorage.setItem(StorageKey.userInfo, JSON.stringify(data));
      navigate(HOME_URL, { replace: true });
    },
  });

  const iptAccountRules = genRules({
    name: "用户名",
    required: true,
  });
  const iptPwdRules = genRules({
    name: "密码",
    required: true,
  });

  async function submit() {
    const [err, data] = await to(form.validateFields());
    if (err) {
      return;
    }
    setLoading(true);
    const [err2, res] = await to(
      loginApi({
        username: encrypt(data.username),
        password: encrypt(data.password),
      }),
    );
    setLoading(false);
    if (err2) {
      msg.error(err2);
      return;
    }
    if (res.errMessage) {
      msg.error(res.errMessage);
      return;
    }
    localStorage.setItem(StorageKey.token, res.access_token);
    dispatch(setToken(res.access_token));
    await run();
  }

  return (
    <div className={styles.loginPageContainer}>
      <div className={styles.bgContainer}>
        <img className={styles.logoImg} src={logoPng} />
        <img
          src={bgImg}
          alt=""
          style={{
            width: "32.43vw",
            objectFit: "contain",
            contain: "layout",
            pointerEvents: "none",
          }}
        />
      </div>
      <div className={styles.formContainer}>
        <h1>二代征信</h1>
        <Form style={{ width: "49.29%" }} form={form}>
          <Form.Item rules={iptAccountRules} name="username">
            <Input
              placeholder={"请输入用户名"}
              prefix={<UserOutlined style={{ color: "#999" }} />}
            />
          </Form.Item>
          <Form.Item rules={iptPwdRules} name="password">
            <Input
              placeholder={"请输入密码"}
              prefix={<LockOutlined style={{ color: "#999" }} />}
              type={"password"}
              onPressEnter={submit}
            />
          </Form.Item>
          <Form.Item>
            <NButton
              type={"primary"}
              loading={loading || detailLoading}
              block={true}
              onClick={submit}
              style={{ marginTop: "32px" }}
            >
              登录
            </NButton>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
}
